//页面上所有的资源都加载完毕才会执行这个事件.
window.onload = function () {
  //获取标签
  let register = document.querySelector(".register"); //注册盒子
  let login = document.querySelector(".login"); //登录盒子
  let goLogin = document.getElementById("goLogin");
  let goRegister = document.getElementById("goRegister");

  //登录盒子/注册盒子相互显示影藏
  goLogin.addEventListener("click", function () {
    login.style.display = "block";
    register.style.display = "none";
  });
  goRegister.addEventListener("click", function () {
    login.style.display = "none";
    register.style.display = "block";
  });

  //表单验证的规则:验证一个用户名和密码
  function test() {
    return {
      fields: {
        username: {
          // 这里username是 input 的name属性值，表示对这个输入框进行验证
          validators: {
            // 添加真正的校验规则
            notEmpty: {
              //不能为空
              message: "用户名不能为空.", // 如果不满足校验规则，则给出这句提示
            },
            stringLength: {
              //检测长度
              min: 2, // 最少2位
              max: 15, // 最多15位
              message: "用户名需要2~15个字符",
            },
          },
        },
        password: {
          validators: {
            notEmpty: {
              message: "密码不能为空",
            },
            stringLength: {
              //检测长度
              min: 6,
              max: 15,
              message: "密码需要6~15个字符",
            },
          },
        },
      },
    };
  }

  // 注册
  $(".register form")
    .bootstrapValidator(test())
    .on("success.form.bv", function (e) {
      e.preventDefault();
      // 通过验证，这里的代码将会执行。
      //获取用户输入的账号和密码.
      let username = register.querySelector('[name="username"]').value.trim();
      let password = register.querySelector('[name="password"]').value.trim();
      // console.log(username,password);
      //发送ajax请求完成注册.
      axios({
        method: "post",
        url: "/api/register",
        // data: `username=${username}&password=${password}`,
        data: {
          username,
          password,
        },
      }).then((res) => {
        console.log(res);
        if (res.data.code == 0) {
          //清空输入框
          register.querySelector('[name="username"]').value = "";
          register.querySelector('[name="password"]').value = "";
          //登录盒子显示,注册盒子影藏
          login.style.display = "block";
          register.style.display = "none";
          toastr.success(res.data.message); // 注册成功
        } else {
          toastr.warning(res.data.message); // 注册失败提示
          document.getElementById("registerbtn").disabled = false;
        }
      });
    });

  // 登陆
  $(".login form")
    .bootstrapValidator(test())
    .on("success.form.bv", function (e) {
      e.preventDefault();
      // 1.收集数据
      let username = login.querySelector('[name="username"]').value.trim();
      let password = login.querySelector('[name="password"]').value.trim();
      // 2.发起axios请求
      axios({
        url: "/api/login",
        method: "post",
        data: { username, password },
      }).then((res) => {
        console.log(res);
        if (res.data.code == 0) {
          //登录成功
          //把返回的token给保存起来.
          window.localStorage.setItem('my_token8283',res.data.token);
          //提示信息
          toastr.success(res.data.message);
          // 实现页面的跳转
          setTimeout(function(){
            location.href = "./index.html";
          },1000);
        } else {
          toastr.success(res.data.message);
        }
      });
    });

};
